<template>
  <div>
    <el-dialog title="温馨提示" :visible.sync="dialogVisible" width="30%">
      <div style="width:100%;text-align:center;font-size:16px;font-weight:bold">功能完善中</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- <el-card>
      <p>配送管理</p>
      <div class="searchArea flex">
        <el-form
          ref="deliveryForm"
          :model="deliveryForm"
          :rules="deliveryRule"
          label-position="right"
          label-width="250px"
          style="width:50%"
        >
          <el-form-item prop="areaName" label="配送区域名称：">
            <el-input v-model="deliveryForm.areaName" placeholder="请输入配送区域名称" style="width:60%"></el-input>
          </el-form-item>
          <el-form-item prop="payMethod" label="费用计算方式：">
            <el-radio v-model="deliveryForm.payMethod" label="1">按重量计算</el-radio>
            <el-radio v-model="deliveryForm.payMethod" label="2">按商品件数计算</el-radio>
          </el-form-item>
          <el-form-item prop="startWeightFee" label="1000克以内费用：">
            <el-input v-model="deliveryForm.startWeightFee" placeholder="请输入费用" style="width:60%"></el-input>
          </el-form-item>
          <el-form-item prop="restWeightFee" label="续重每1000克或其零数的费用：">
            <el-input v-model="deliveryForm.restWeightFee" placeholder="请输入费用" style="width:60%"></el-input>
          </el-form-item>
          <el-form-item prop="freeLimit" label="免费额度：">
            <el-input v-model="deliveryForm.freeLimit" placeholder="请输入免费额度" style="width:60%"></el-input>
          </el-form-item>
          <el-form-item prop="deliveryArea" label="所辖地区：">
            <el-cascader
              expand-trigger="hover"
              :options="options"
              v-model="deliveryForm.deliveryArea"
              @change="handleChange"
              filterable
              style="width:60%"
            ></el-cascader>
          </el-form-item>
          <el-form-item prop="detailAdd" label="详细地址：">
            <el-input v-model="deliveryForm.detailAdd" placeholder="请输入详细地址" style="width:60%"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type='primary'>确定</el-button>
            <el-button type='danger'>重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>-->
  </div>
</template>

<script>
import options from "../../assets/js/country-level3-data";
export default {
  data() {
    return {
      deliveryForm: {
        areaName: "",
        payMethod: "1",
        startWeightFee: "",
        restWeightFee: "",
        freeLimit: "",
        deliveryArea: "",
        detailAdd: ""
      },
      deliveryRule: {
        areaName: [
          { required: true, message: "请输入配送区域名称", trigger: "blur" }
        ],
        startWeightFee: [
          { required: true, message: "请输入1000克以内费用", trigger: "blur" }
        ],
        restWeightFee: [
          {
            required: true,
            message: "请输入续重每1000克或其零数的费用",
            trigger: "blur"
          }
        ],
        freeLimit: [
          { required: true, message: "请输入免费额度：", trigger: "blur" }
        ],
        deliveryArea: [
          { required: true, message: "请输入详细地址", trigger: "blur" }
        ],
        detailAdd: [
          { required: true, message: "请输入详细地址", trigger: "blur" }
        ]
      },
      options: options,
      dialogVisible: true
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  }
};
</script>

<style lang="scss" scoped>
p {
  font-size: 20px;
  padding: 10px 0;
}
.searchArea {
  width: 100%;
  margin-top: 15px;
  padding: 15px 0;
  justify-content: flex-start;
  // box-shadow: 2px 3px 15px 0 #ccc;
}
</style>